import { defineComponent, ref, onMounted } from 'vue'
import { NTable } from 'naive-ui'
import MessageBox from '@/components/nComponents/MessageBox'
export default defineComponent({
  emits: ['loaded'],
  setup(props, { expose, emit }) {
    const show = ref(false)
    const open = () => {
      show.value = true
    }
    expose({
      open
    })
    onMounted(() => {
      emit('loaded')
    })
    return () => (
      <>
        <MessageBox
          title="Col宽度说明"
          v-model={show.value}
          v-slots={{
            default: () => (
              <>
                <NTable bordered={true} single-line={false}>
                  <thead>
                    <tr>
                      <th>类型</th>
                      <th>说明</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>响应式</td>
                      <td>1fr, 2fr...; 类似于flex中的flex: 1, flex: 2...</td>
                    </tr>
                    <tr>
                      <td>百分比</td>
                      <td>10%, 20%</td>
                    </tr>
                    <tr>
                      <td>固定值</td>
                      <td>200px, 10rem</td>
                    </tr>
                    <tr>
                      <td>范围</td>
                      <td>minmax(100px, 1fr); 100px是最小值,1fr是最大值。</td>
                    </tr>
                    <tr>
                      <td>关键字</td>
                      <td>auto 表示由浏览器自己决定长度。</td>
                    </tr>
                    <tr>
                      <td>关键字</td>
                      <td>auto-fill 表示自动填充。</td>
                    </tr>
                  </tbody>
                </NTable>
              </>
            )
          }}
        />
      </>
    )
  }
})
